<template>
  <!--表格列表，历史业绩、历史净值-->
  <div class="fix_data_list data_list" :class="className">
    <div class="fix_header_wrap" ref="fixHeaderWrap">
      <div :class="{'fixed':isScroll}">
        <slot name="header">
          <div class="li_header flex">
            <div class="w100" v-for="field in fieldArray" :key="field.key">{{ field.name }}</div>
          </div>
       </slot>
      </div>
    </div>

    <div class="list_body_wrap" ref="listBodyWrap" :style="{height: listBodyWrapHeight}" v-if="isScroll">
        <BScroll :data="data" :pullup="true" v-on:pullup="pullup" :totalPage="totalPage" :refreshTime="refreshTime" :busCurrPage="busCurrPage" :loading="loading" :noDataText="noDataText">
          <slot name="scrollList" :scrollList="data">
            <div class="li_item_content v-1px-b" v-for="(item,index) in data" :key="index">
              <slot name="listItem" :productInfo="item">
                <div class="li_item flex">
                  <div class="w100" :class="riseOrDrop(item,field)" v-for="field in fieldArray" :key="field.key">{{ item[field.key] }}</div>
                </div>
              </slot>
            </div>
          </slot>
          <template v-slot:footer>
            <slot name="footer"></slot>
          </template>
        </BScroll>
    </div>

    <div class="list_body_wrap" v-else>
      <van-loading type="spinner" v-show="loading" class="tc" size="20px">加载中...</van-loading>
      <slot name="list">
        <div class="li_item_content v-1px-b" v-for="(item,index) in dataList" :key="index">
          <slot name="listItem" :productInfo="item" :index="index">
            <div class="li_item flex">
              <div class="w100" :class="riseOrDrop(item,field)" v-for="field in fieldArray" :key="field.key">{{ item[field.key] }}</div>
            </div>
          </slot>
        </div>
      </slot>
      <!--默认无数据样式-->
      <no-data v-show="!loading && !dataList.length"></no-data>
    </div>

  </div>
</template>

<script>
import { getZdfClassName } from '@/utils/common';
import NoData from '@/components/common/noData.vue';
import { Loading } from 'vant';
import BScroll from './BScroll';

export default {
  name: '',
  components: {
    BScroll,
    NoData,
    [Loading.name]: Loading,
  },
  props: {
    noDataText: String,
    loading: Boolean,
    className: String,
    fieldArray: {
      type: Array,
      default() {
        return [];
      }
    },
    dataList: {
      type: Array,
      default() {
        return [];
      }
    },
    // 上拉加载
    isScroll: {
      type: Boolean,
      default: false
    },
    // 是否后端分页
    serverSide: {
      type: Boolean,
      default: false
    },
    // 设置滚动容器高度
    wrapHeight: [String, Number],
    busCurrPage: {
      type: Number
    },
  },
  data() {
    return {
      // isScroll时使用
      data: [], // 显示数据
      totalData: [], // 全部数据
      currPage: 1, // 当前页数
      totalPage: 0, // 全部数据页数
      numPerPage: 20, // 每页加载个数
      refreshTime: 0,
    };
  },
  computed: {
    listBodyWrapHeight() {
      if (this.$refs.fixHeaderWrap) {
        return `${this.wrapHeight - this.$refs.fixHeaderWrap.clientHeight}px`;
      }
      return `${this.wrapHeight}px`;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 前端分页加载
      if (this.isScroll && !this.serverSide) {
        this.totalData = [].concat(this.dataList);
        this.totalPage = Math.ceil(this.totalData.length / this.numPerPage);
        // 先显示前numPerPage个订单数据
        this.data = this.totalData.splice(0, this.numPerPage);
      }
      // 后端分页加载
      if (this.isScroll && this.serverSide) {
        if (this.dataList.length < this.numPerPage) {
          this.totalPage = this.currPage;
        } else {
          this.totalPage = 9999;
        }
        this.data = this.dataList;
      }
    },
    resetData() {
      this.data = []; // 显示数据
      this.totalData = []; // 全部数据
      this.currPage = 1; // 当前页数
      this.totalPage = 0; // 全部数据页数
    },
    riseOrDrop(item, field) {
      const riseOrDropKeys = ['rise', 'incomeratio', 'nVDailyGrowthRate'];
      if (riseOrDropKeys.includes(field.key)) {
        return getZdfClassName(item[field.key]);
      }
      return '';
    },
    pullup() {
      if (this.isScroll && !this.serverSide) {
        if (this.totalData.length > 0) {
          this.data = this.data.concat(this.totalData.splice(0, this.numPerPage));
        }
      }

      if (this.isScroll && this.serverSide) {
        this.currPage++;
        this.$emit('pullup');
      }
    },
    scrollTo() {

    }
  },
  watch: {
    dataList(newValue) {
      if (this.busCurrPage === 0) { // 多个tab共用一个列表时，切换tab时，busCurrPage=0
        this.resetData();
        this.init();
      } else {
        // 前端分页加载
        if (this.isScroll && !this.serverSide) {
          this.init();
        }
        // 后端端分页加载
        if (this.isScroll && this.serverSide) {
          if (newValue.length < this.numPerPage) {
            this.totalPage = this.currPage;
          } else {
            this.totalPage = 9999;
          }
          this.data = this.data.concat(newValue);
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.fix_data_list{
  &.ccList {
    .fix_header_wrap{
      height: 44px;
      .li_header{
        padding: 0 15px;
      }
    }
    .list_body_wrap{
      padding: 0 15px;
    }
  }
  &.column_fund_list{
    &.list_module{
      margin-bottom: 0;
    }
    .fix_header_wrap{
      display: none;
    }
    .list_body_wrap{
      background: #f6f7f8;
    }
  }
  &.hot_plate_list,
  &.ipo_fund_list{
    .list_body_wrap{
      background: #f6f7f8;
      .li_item_content{
        margin-bottom: 15px;
      }
    }
  }
  &.announcement_list,
  &.ipo_fund_list,
  &.search_list{
    .fix_header_wrap{
      display: none;
    }
  }
}
</style>